<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支持滑动的多卡片详情页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            padding: 20px;
            background: #f0f0f0;
        }

        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        /* 详情面板容器 */
        .detail-overlay {
            position: fixed;
            top: 80px; /* 导航栏高度 */
            left: 0;
            right: 0;
            bottom: 0;
            background: white;
            transform: translateY(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1000;
            overflow-y: auto; /* 启用垂直滚动 */
        }

        .detail-overlay.active {
            transform: translateY(0);
        }

        /* 详情内容容器 */
        .detail-content {
            padding: 20px;
            min-height: calc(100% + 1px); /* 确保滚动触发 */
        }

        /* 导航栏样式 */
        .nav-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 80px;
            background: white;
            display: flex;
            align-items: center;
            padding: 0 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            z-index: 1001;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .nav-header.active {
            opacity: 1;
            visibility: visible;
        }

        .close-btn {
            font-size: 24px;
            cursor: pointer;
            background: none;
            border: none;
            padding: 10px;
        }

        /* 防止背景滚动 */
        body.no-scroll {
            overflow: hidden;
            height: 100vh;
        }

        /* 滚动条美化 */
        .detail-overlay::-webkit-scrollbar {
            width: 8px;
        }

        .detail-overlay::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .detail-overlay::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="card-container" id="cardContainer"></div>

    <div class="nav-header">
        <button class="close-btn" onclick="hideDetail()">×</button>
    </div>

    <div class="detail-overlay" onclick="handleOverlayClick(event)">
        <div class="detail-content">
            <!-- 动态内容将插入到这里 -->
        </div>
    </div>

    <script>
        // 卡片数据
        const cardsData = [
            {
                title: "科技新闻",
                preview: "最新人工智能突破",
                content: `
                    <h2>深度神经网络新突破</h2>
                    <div style="height:800px">纵向滚动测试内容...</div>
                    <p style="color:red">← 请上下滑动查看内容</p>
                `
            },
            {
                title: "旅游指南",
                preview: "十大必去海岛推荐",
                content: `
                    <h2>2023最佳度假海岛</h2>
                    <div style="height:1200px">更多详情内容...</div>
                `
            },
            {
                title: "美食课堂",
                preview: "法式烘焙技巧",
                content: `
                    <h2>经典可颂制作教程</h2>
                    <div style="height:1500px">烘焙步骤演示...</div>
                `
            },
            {
                title: "健身指南",
                preview: "家庭徒手训练计划",
                content: `
                    <h2>30天塑形计划</h2>
                    <div style="height:2000px">每日训练详情...</div>
                `
            }
        ];

        // 动态生成卡片
        function initCards() {
            const container = document.getElementById('cardContainer');
            cardsData.forEach((card, index) => {
                const cardElement = document.createElement('div');
                cardElement.className = 'card';
                cardElement.innerHTML = `
                    <h3>${card.title}</h3>
                    <p>${card.preview}</p>
                `;
                cardElement.onclick = () => showDetail(index);
                container.appendChild(cardElement);
            });
        }

        // 显示详情
        function showDetail(index) {
            const detailContent = document.querySelector('.detail-content');
            detailContent.innerHTML = cardsData[index].content;
            
            // 确保每次打开滚动位置归零
            document.querySelector('.detail-overlay').scrollTop = 0;
            
            document.body.classList.add('no-scroll');
            document.querySelector('.detail-overlay').classList.add('active');
            document.querySelector('.nav-header').classList.add('active');
        }

        // 隐藏详情
        function hideDetail() {
            document.body.classList.remove('no-scroll');
            document.querySelector('.detail-overlay').classList.remove('active');
            document.querySelector('.nav-header').classList.remove('active');
        }

        // 点击处理
        function handleOverlayClick(e) {
            if (e.target === document.querySelector('.detail-overlay')) {
                hideDetail();
            }
        }

        // 初始化
        initCards();

        // 优化触摸滚动体验
        let startY = 0;
        const overlay = document.querySelector('.detail-overlay');
        
        overlay.addEventListener('touchstart', e => {
            startY = e.touches[0].clientY;
        }, { passive: true });

        overlay.addEventListener('touchmove', e => {
            // 判断是否允许滚动
            const isScrollingUp = e.touches[0].clientY > startY;
            const isAtTop = overlay.scrollTop <= 0;
            const isAtBottom = overlay.scrollTop + overlay.clientHeight >= overlay.scrollHeight;
            
            if ((isAtTop && isScrollingUp) || (isAtBottom && !isScrollingUp)) {
                e.preventDefault();
            }
        }, { passive: false });
    </script>
</body>
</html>
